import React, { Component } from 'react';
import './index.scss';
import { Route, Switch, NavLink, Redirect, Link } from 'react-router-dom';
import Subscribey from '../child/subscribey';
import Android from '../child/android';
import Frontend from '../child/frontend';
import Ios from '../child/ios';
import Design from '../child/design';
import Freebie from '../child/freebie';
import Article from '../child/article';
import Devops from '../child/devops';
import Backend from '../child/backend';
import axios from 'axios';

class Com extends Component {
    constructor (props) {
        super(props);
        this.state = {
            imgurl: 'https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png',
            resusn: '',
            respas: '',
            phonenum: '',
            logusn: '',
            logpas: ''
        }
    }
    Login () {
        document.querySelector('.logres').style.display="block";
        document.querySelector('.log').style.display="block";
        document.querySelector('.res').style.display="none";
    }
    Reset () {
        document.querySelector('.logres').style.display="block";
        document.querySelector('.log').style.display="none";
        document.querySelector('.res').style.display="block";
    }

    changeimg1 () {
        this.setState({
            imgurl: 'https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png'
        })
    }
    changeimg2 () {
        this.setState({
            imgurl: 'https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png'
        })
    }
    dontlog () {
        document.querySelector('.logres').style.display="none";
    }
    dontres () {
        document.querySelector('.logres').style.display="none";
    }
    resuser () {
        let zcyhm = this.refs.resusername.value
        this.setState({
            resusn: {zcyhm}
        })
    }
    respas () {
        let zcmm = this.refs.respas.value
        this.setState({
            respas: {zcmm}
        })
    }
    res () {
        console.log(this.state.resusn)
        console.log(this.state.respas)
        axios.post('https://www.daxunxun.com/users/register',
        { username: this.state.resusn,
          password: this.state.respas })
          .then( data => {
            console.log(data)
            if( data.data === 1 ) {
                this.props.history.push('/subscribey')
            }
        })
    }
    sendcode () {
        let phone1 = this.refs.phone.value
        axios.get(`https://www.daxunxun.com/users/sendCode?tel=${ phone1 }`).then( data => {
            console.log(data)
        })
        console.log(phone1)
    }
    log () {
        let dlyhm = this.refs.resusername.value
        let dlmm = this.refs.resusername.value
        this.setState({
            logusn: {dlyhm},
            logpas: {dlmm}
        })
        axios.post('https://www.daxunxun.com/users/login', {
            username: this.state.logusn,
            password: this.state.logpas
        }).then( data => {
            console.log(data)
            if( data.data === 1 ) {
                this.props.history.push('/subscribey')
            }
        })
    }
    componentDidMount () {
        
    }

  render () {
    return (
      <div className='container'>
        <div className="common-header">
        <div className='logo'>
          <img src="https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt=""></img>
        </div>
        <ul className="common-nav">
          <li>
            <Link className='active' to='/'>首页</Link>
          </li>
          <li><Link to='/activities'>动态</Link></li>
          <li><Link to='/topics'>话题</Link></li>
          <li><Link to='/xiaoce'>小册</Link></li>
          <li><Link to='/huodong'>活动</Link></li>
        </ul>
        <div className="common-search">
          <div className='search-from'>
            <input type="text" placeholder='搜索掘金' />
            <span className="iconfont icon-sousuo"></span>
          </div>
        </div>
        <div className="logorres">
            <ul>
              <li>
                  <i className='iconfont icon-caogao'></i>
                  <span>写文章</span>
                  <div className='submit-panel'>
                    <span>来掘金写文章，您将有机会</span>
                    <ul>
                        <li>与超过 300 万开发者分享您的经验和观点</li>
                        <li>被编辑推荐，获得更多曝光和关注</li>
                        <li>加入专栏作者群，结识众多优秀开发者</li>
                    </ul>
                    <button>开始写文章</button>
                  </div>
                  <div className='jianjiao'></div>
                  </li>
              <li><span onClick={ this.Login.bind(this)}>登录</span><i className='iconfont icon-dian'></i><span onClick={ this.Reset.bind(this)}>注册</span></li>
            </ul>
        </div>
        </div>
        <div className="index-section">
            <div className='index-left-section'>
            <div className='timeline-entry-list'>
                <div className='list-header-no'>
                <span>热门文章</span>
                <ul>
                <li> <NavLink to="/nologin/subscribey">推荐</NavLink></li> 
                <li> <NavLink to="/nologin/android">Android</NavLink></li> 
                <li> <NavLink to="/nologin/frontend">前端</NavLink></li> 
                <li> <NavLink to="/nologin/ios">iOS</NavLink></li> 
                <li> <NavLink to="/nologin/backend">后端</NavLink></li> 
                <li> <NavLink to="/nologin/design">设计</NavLink></li> 
                <li> <NavLink to="/nologin/freebie">工具资源</NavLink></li> 
                <li> <NavLink to="/nologin/article">阅读</NavLink></li> 
                <li> <NavLink to="/nologin/devops">运维</NavLink></li> 
                </ul>
                </div>
                <div>
                <Switch>
                  <Route path="/nologin/android" component = { Android } />
                  <Route path="/nologin/frontend" component = { Frontend } />
                  <Route path="/nologin/ios" component = { Ios } />
                  <Route path="/nologin/backend" component = { Backend } />
                  <Route path="/nologin/design" component = { Design } />
                  <Route path="/nologin/freebie" component = { Freebie } />
                  <Route path="/nologin/article" component = { Article } />
                  <Route path="/nologin/devops" component = { Devops } />
                  <Route path="/nologin/subscribey" component = { Subscribey } />
                  <Redirect from='/nologin' to='/nologin/subscribey' />
s              </Switch>
                </div>
            </div>
            </div>
            <div className='index-right-section'>
                <div className='juejin-books'>
                    <div className='books-header'>
                        <span className='title'>掘金小册</span>
                        <i className='iconfont icon-fanhui'></i>
                        <i className='iconfont icon-gengduo'></i>
                    </div>
                    <figure className='books'>
                        <img src="https://user-gold-cdn.xitu.io/2017/11/20/15fd79417e955d9a?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1" alt=""/>
                        <figcaption>
                            <span>数字货币与区块链原理</span>
                            <div><span>新人价￥14.95</span><span>￥29.9</span></div>
                        </figcaption>
                    </figure>
                    <figure className='books'>
                        <img src="https://user-gold-cdn.xitu.io/2017/11/20/15fd79417e955d9a?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1" alt=""/>
                        <figcaption>
                            <span>数字货币与区块链原理</span>
                            <div><span>新人价￥14.95</span><span>￥29.9</span></div>
                        </figcaption>
                    </figure>
                    <span className='newuser-title'>
                        <span>新人专享好礼</span>
                        <div className='fengefu'></div>
                    </span>
                    <figure className='giftbag'>
                        <img src="https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.svg" alt=""/>
                        <figcaption>
                            <div><span>送你</span><span>45元</span><span>买小册</span></div>
                            <div>立即领取</div>
                        </figcaption>
                    </figure>
                </div>
                <div className='block-body'>
                    <img src="https://b-gold-cdn.xitu.io/v3/static/img/timeline.e011f09.png" alt=""/>
                    <span>下载掘金客户端</span>
                    <span>一个帮助开发者成长的社区</span>
                </div>
                <div className='sidebar-user'>
                    <div className='sidebar-user-title'>
                        <span className='title'>你可能感兴趣的人</span>
                    </div>
                    <div className='user'>
                        <i className='iconfont icon-yonghu'></i>
                        <span>
                            <span>Xmy</span>
                            <span className='litter-size'>设计爱好者</span>
                        </span>
                    </div>
                    <div className='user'>
                        <i className='iconfont icon-yonghu'></i>
                        <span>
                            <span>Xmy</span>
                            <span className='litter-size'>设计爱好者</span>
                        </span>
                    </div>
                    <div className='user'>
                        <i className='iconfont icon-yonghu'></i>
                        <span>
                            <span>Xmy</span>
                            <span className='litter-size'>设计爱好者</span>
                        </span>
                    </div>
                    <div className='user'>
                        <i className='iconfont icon-yonghu'></i>
                        <span>
                            <span>Xmy</span>
                            <span className='litter-size'>设计爱好者</span>
                        </span>
                    </div>
                </div>
                <div className='sidebar-block'>
                    <ul>
                        <li>
                            <img src="https://b-gold-cdn.xitu.io/v3/static/img/repos.28d0802.png" alt=""/>
                            <span>开源库</span>
                        </li>
                        <li>
                        <img src="https://b-gold-cdn.xitu.io/v3/static/img/collections.945b9ae.png" alt=""/>
                            <span>收藏集</span>
                        </li>
                        <li>
                        <img src="https://b-gold-cdn.xitu.io/v3/static/img/juejin-extension-icon.4b79fb4.png" alt=""/>
                            <span>下载掘金浏览器插件</span>
                        </li>
                        <li>
                        <img src="https://b-gold-cdn.xitu.io/v3/static/img/juejin-miner.b78347c.png" alt=""/>
                            <span>前往掘金翻译计划</span>
                        </li>
                        <li>
                        <img src="https://b-gold-cdn.xitu.io/v3/static/img/juejin-partner.4dd2d8c.png" alt=""/>
                            <span>商务合作</span>
                        </li>
                    </ul>
                </div>
                <div className='sidebar-block-txt'>
                        <ul>
                            <li>
                                <p>
                                    <span>关于</span><i className='iconfont icon-dian'></i>
                                    <span>掘金基本法</span><i className='iconfont icon-dian'></i>
                                    <span>建议反馈</span><i className='iconfont icon-dian'></i>
                                    <span>加入我们</span>
                                </p>
                            </li>
                            <li><p><span>商务合作</span><i className='iconfont icon-dian'></i><span>友情链接</span><i className='iconfont icon-dian'></i><span>专栏介绍</span></p></li>
                            <li><span>津ICP备15003202号-2</span></li>
                            <li><span>京公网安备11010802026719号</span></li>
                            <li><span>?2019 掘金</span></li>
                        </ul>
                    </div>
            </div>
            </div>
        <div className='logres'>
            <div className='log'>
                <div className='log-div'>
                <img src= { this.state.imgurl } alt=""/>
                <div className='panel'>
                    <h1>登录</h1>
                    <i onClick={ this.dontlog.bind(this) } className='iconfont icon-x-copy'></i>
                    <input type="text" ref='logusn' placeholder='请输入手机号或邮箱'/>
                    <input onFocus={ this.changeimg1.bind(this) } onBlur={ this.changeimg2.bind(this) } ref='logpas' type="password" placeholder='请输入密码'/>
                    <button onClick={ this.log.bind(this) }>登录</button>
                    <p><span>没有账号？</span><span>注册</span><span>忘记密码</span></p>
                    <p>第三方账号登录</p>
                    <img className='otherlogin' src={require('../img/otherlogin.jpg')} alt=""/>
                </div>
                </div>
            </div>
            <div className='res'>
                <div className='res-div'>
                <h1>注册</h1>
                <i onClick={ this.dontres.bind(this) } className='iconfont icon-x-copy'></i>
                <input onBlur={ this.resuser.bind(this) } ref="resusername" type="text" placeholder='请输入用户名'/>
                <input onBlur={ this.respas.bind(this) } ref="phone" type="text" placeholder='请输入手机号'/>
                <div className='yzmcode'>
                <input ref="respas" type="text" placeholder='验证码'/>
                <button onClick={ this.sendcode.bind(this) }>获取验证码</button>
                </div>
                <input type="password" ref="respas" placeholder='请输入密码（不少于6位）'/>
                <button onClick={ this.res.bind(this) }>注册</button>
                <p><span>已有账号登录</span></p>
                <p>第三方账号登录</p>
                <img className='otherlogin' src={require('../img/otherlogin.jpg')} alt=""/>
                </div>
            </div>
        </div>
      </div>
    )
  }
}

export default Com;